<template>
    <a-col
        :flex="1"
        style="display: flex; justify-content: flex-end"
    >
        <a-space>
            <slot name="actionBefore"></slot>
            <a-link
                v-if="expandNumber < fields.length"
                @click="expand = !expand"
            >
                {{ expand ? '收起' : '展开' }}
                <IconUp v-if="expand" />
                <IconDown v-else />
            </a-link>
            <a-button
                v-if="search?.reset"
                @click="search?.reset?.()"
                :loading="search?.loading"
            >
                <template #icon>
                    <IconRefresh />
                </template>
                重置
            </a-button>
            <a-button
                v-if="search?.query"
                @click="search?.query?.()"
                :loading="search?.loading"
                type="primary"
            >
                <template #icon>
                    <IconSearch />
                </template>
                搜索
            </a-button>
            <slot name="actionAfter"></slot>
        </a-space>
    </a-col>
</template>

<script setup lang="ts">
import { IconRefresh, IconSearch, IconUp, IconDown } from '@arco-design/web-vue/es/icon'

const { fields, expandNumber = Infinity } = defineProps<{
    fields: FormFields
    search?: {
        loading?: boolean
        query?: () => void
        reset?: () => void
    }
    expandNumber?: number
}>()

const expand = defineModel<boolean>('expand', { default: false, required: false })
</script>
